<template>
	<view>
		<view class="list">
			<text class="title norequired">费用类别</text>
			<input type="text" disabled placeholder="请选择" v-model="formData.costTypeName" />
			<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="" class="more_icon">
			</image> -->
		</view>

		<view class="line" />
		<view class="list">
			<text class="title norequired">费用月份</text>
			<input type="text" placeholder="请选择" disabled v-model="formData.month" />
			<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="" class="more_icon">
			</image> -->
		</view>
		<view class="line" />
		<view class="list">
			<text class="title required">{{formData.action == 3?'水表数':'电表数'}}</text>
			<input type="digit" v-model="formData.meterNum" @blur="handleBlur('meterNum', $event)" placeholder="请输入" />
			<view class="jiage dis">
				{{formData.action == 3?'方':'度'}}
			</view>
		</view>
		<!-- <view class="list" v-else>
			<text class="title required">电表数</text>
			<input type="digit" v-model="formData.electricMeterNum" @blur="handleBlur('electricMeterNum', $event)" placeholder="请输入" />
			<view class="jiage dis">
				度
			</view>
		</view> -->
		<view class="line" />
		<view class="list">
			<text class="title norequired">费用金额</text>
			<input type="text" v-model="formData.amount" placeholder="" disabled />
			<view class="jiage dis">
				元
			</view>
		</view>
		<view class="line" />
		<!-- <view class="list required">
			<text class="title">上传凭证</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<view class="upload_box">
				<view style="position: relative;" v-for="(item,index) in formData.certificateUrl" :key="index">
					<image :src="item" mode="aspectFit" class="photo" @click="previewImage(index)"></image>
					<deleteBtn :index="index" @clearItem="deleteImage" ></deleteBtn>
				</view>
				<view class="upload" @click="handleUpload" v-if="formData.certificateUrl.length == 0">
					<image src="/pagesA/static/xiangji.svg" mode="" class="upload_icon"></image>
					<text class="upload_text">上传图片</text>
				</view>
			</view>
		</view> -->
		<view class="list" style="margin-top: 16rpx;">
			<text class="title norequired">备注</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<textarea placeholder="请输入" v-model="formData.remark" placeholder-style="color:#ccc;" class="textarea" />
		</view>
		<view style="height: 120rpx;"></view>
		<view class="bottom_box">
			<view class="add_btn" @click="handleClick">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '../../uitls/http.js'
	import {
		chooseImageFun
	} from '../../uitls/upload.js'
	import {
		eleWaterPay,
		calculatePrice
	} from './js/api.js'
	// action :   3-水费，5-电费
	const formData = reactive({
		id: '',
		certificateUrl: [],
		costTypeName: '',
		month: '',
		action: '',
		amount: '',
		remark: '',
		waterMeterNum:'',
		electricMeterNum:'',
		
	})
	const handleBlur = (field, e) => {
		// 从微信小程序事件中获取输入值
		  let value = e.detail.value || '';
		  
		  // 步骤1：清除所有非数字和非小数点的字符
		  value = value.replace(/[^\d.]/g, '');
		  
		  // 步骤2：处理多个小数点的核心逻辑
		  if (value.includes('.')) {
		    // 只保留第一个小数点，后面的小数点全部移除
		    const firstDotIndex = value.indexOf('.');
		    // 截取第一个小数点前的部分 + 第一个小数点 + 后面部分移除所有小数点
		    value = value.slice(0, firstDotIndex + 1) + 
		            value.slice(firstDotIndex + 1).replace(/\./g, '');
		  }
		  
		  // 步骤3：处理开头为小数点的情况（自动补0）
		  if (value.startsWith('.')) {
		    value = '0' + value;
		  }
		  
		  // 步骤4：限制小数点后最多两位
		  if (value.includes('.')) {
		    const parts = value.split('.');
		    // 整数部分 + 小数点 + 小数部分前两位
		    value = parts[0] + '.' + (parts[1] || '').slice(0, 2);
		  }
		  
		  // 步骤5：处理空值或纯0的特殊情况
		  // if (value === '0' || value === '0.') {
		  //   value = ''; // 可根据需求调整，如保留"0"则改为 value = value
		  // }
		  
		  // 更新数据并同步到视图（微信小程序推荐用:value绑定）
		  formData[field] = value;
		  //水电表数清空时，价格归 也清空
		  if(value==0) formData.amount = ''
		  calculate()
	}
	const calculate = async ()=>{
		let params ={
			action:formData.action,
			id:formData.id,
			meterNum:formData.meterNum 
		}
		let res = await calculatePrice(params)
		if(res.data.code == 0){
			console.log(res.data.data)
			formData.amount = res.data.data
			// if(formData.action == 3)formData.waterMeterNum = res.data.data
			// if(formData.action == 5) formData.electricMeterNum = res.data.data
			
		}
	}
	const handleClick = async () => {
		if (!formData.meterNum) {
			http.isMssage(`请输入${formData.action==3?'水':'电'}表数`)
			return false
		}
		// if (formData.certificateUrl.length == 0) {
		// 	http.isMssage('请上传凭证')
		// 	return false
		// }
		let params = {
			action: formData.action,
			amount: formData.amount,
			id: formData.id,
			meterNum:formData.meterNum,
			remark: formData.remark,
			// voucher: formData.certificateUrl[0]
		}
		// console.log('params==',params)
		let res = await eleWaterPay(params)
		// console.log(res)
		if (res.data.code == 0) {
			http.isMssage('提交成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
	onLoad((options) => {
		if (options.type == 'water') {
			formData.costTypeName = '水费'
			formData.action = 3
		} else {
			formData.costTypeName = '电费'
			formData.action = 5
		}
		formData.id = options.id
		formData.month = options.month

	})
	const previewImage = (index) => {
		uni.previewImage({
			current: formData.certificateUrl[index], // 当前显示图片的URL
			urls: formData.certificateUrl.map(item => item), // 需要预览的图片URL列表
			success: () => {
				console.log('预览成功');
			},
			fail: (err) => {
				console.error('预览失败', err);
			}
		});
	};
	const handleUpload = async () => {
		let res = await chooseImageFun('utilityBill')
		if (res.imageUrl) {
			formData.certificateUrl.push(res.imageUrl)
		}
	}
	const deleteImage = (index) => {
		formData.certificateUrl.splice(index, 1)
	}
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.list {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		input {
			font-size: 28rpx;
			flex:1;
			margin-right: 60rpx;
		}

		.jiage {
			min-width: 50rpx;
			height: 100%;
			// border: 1px solid red;
			position: absolute;
			// right: 30rpx;
			right: 16rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			text-align: right;
			font-weight: 400;
			padding: 0 10rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 34rpx;
			width: 24rpx;
			height: 40rpx;
		}

		.textarea {
			width: 658rpx;
			height: 200rpx;
			// margin: auto;
			background: #F8F8F8;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 28rpx;
		}

		.upload_box {
			width: 100%;
			// border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			height: 200rpx;
			display: flex;
			// flex-direction: column;
			// justify-content: center;
			align-items: center;

			.photo {
				height: 156rpx;
				width: 156rpx;
				margin-right: 22.56rpx;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
			}

			.upload {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 8rpx;
				height: 156rpx;
				width: 156rpx;

				.upload_icon {
					width: 60rpx;
					height: 60rpx;
				}

				.upload_text {
					margin-top: 16rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}

		}
	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		margin: 0 30rpx;
	}

	.tip {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
		padding-left: 30rpx;
		margin-top: 30rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>